<template>
	<view class="">
		<u-toast ref="ucToast"></u-toast>
		<!-- 交易确认弹窗-->
		<u-popup :show="moneyShow" mode="center" @close="close" round="16rpx" bgColor='transparent'
			overlayOpacity='0.85' closeOnClickOverlay>
			<view class="popup-one-box flex-col align-center">
				<view class="popup-title">
					确定赠送信息
				</view>
				<view class="has-shuijing justify-start">
					为了确保你的利益，请仔细确认本次赠送信息
					<!-- <text class="shui-ji-num">0</text> 个 -->
				</view>
				<u-toast ref="uToast"></u-toast>
				<view class="info-box">
					<view class="top-cell justify-between align-center">
						<view class="my-qing-long">
							接收人
						</view>
						<view class="user-info justify-start align-center">
							<image :src="data.avatar" mode=""></image>
							{{data.nickname}}
						</view>
					</view>
					<view class="top-cell justify-between align-center">
						<view class="my-qing-long">
							ID
						</view>

						<view class="name">
							{{data.code}}
						</view>
					</view>
					<view class="top-cell justify-between align-center">
						<view class="my-qing-long">
							赠送数量
						</view>
						<view class="he-ji">
							{{num}}
						</view>
					</view>
				</view>

				<view class="popup-box-btn align-center justify-center" @click="putLong">
					确定赠送
				</view>
				<view class="tips align-center justify-center">
					赠送后无法撤回,请谨慎操作
				</view>
			</view>
		</u-popup>
		<modal-password :isShow='parsswordShow' @close="parsswordShow=false" :loading='loading'
			@update='putLong1'></modal-password>
	</view>

</template>

<script>
	import modalPassword from './modal-password.vue'
	export default {
		components: {
			// 注册组件
			modalPassword
		},
		props: {
			isShow: {
				type: Boolean,
				default: false,
			},
			data: {
				type: Object,
				default: () => {},
			},
			num: {
				type: Number,
				default: 1,
			}
		},
		data() {
			return {
				number: 1,
				moneyShow: false,
				parsswordShow: false,
				loading: false,
			}
		},
		watch: {
			isShow(val) {
				console.log(val, 'modal');
				this.moneyShow = val
				if (val) {}
			}
		},
		methods: {
			close() {
				this.$emit('close')
			},
			putLong() {
				this.close()
				this.parsswordShow = true

			},
			async putLong1(e) {
				let _this = this
				if (this.loading) return
				this.loading = true
				let url = '/api/v1/crystal_transfer'
				let {
					code,
					msg,
					data
				} = await this.$postRequest(url, {
					to_code: this.data.code,
					number: this.num,
					pay_password: e
				})
				if (code == 200) {
					console.log(data, '静态资源');
					this.parsswordShow = false
					this.loading = false
					this.$refs.ucToast.show({
						message: msg,
						complete() {
							_this.$emit('update',true)
							_this.close()
						}
					})

				} else {
					this.loading = false
					this.$refs.ucToast.show({
						message: msg
					})
				}
			}
		}
	}
</script>

<style>
	@import '/common/css/common.css';
</style>
<style lang="scss" scoped>
	// 放置青龙样式
	.popup-one-box {
		position: relative;
		z-index: 7;
		width: 560rpx;
		border-radius: 16rpx;
		background: #21212D;
		padding: 40rpx 40rpx 40rpx;

		.popup-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #FFF;
			margin-bottom: 37rpx;
		}

		.info-box {
			width: 475rpx;
			position: relative;
			margin: 0rpx auto 24rpx;
			padding: 0rpx 24rpx;
			background-color: #282A37;
			border-radius: 16rpx;

			.top-cell {
				background: #282A37;
				// height: 120rpx;
				padding: 36rpx 0;

				.user-info {
					padding-left: 20rpx;
					color: #FFF;
					font-size: 27rpx;

					image {
						width: 64rpx;
						height: 64rpx;
						margin-right: 18rpx;
						border-radius: 8rpx;
					}
				}

				.name {
					// margin-right: 30rpx;
					font-size: 28rpx;
					color: rgba(255, 255, 255, .8);
				}
			}


			.my-qing-long {
				font-size: 28rpx;
				color: rgba(255, 255, 255, .8);
				text-align: left;
			}

			.long-num {
				width: 30rpx;
				height: 30rpx;

			}

			.he-ji {
				font-size: 26rpx;
				color: #20FFA8;
				;
			}
		}

		.has-shuijing {
			width: 100%;
			// height: 44rpx;
			font-size: 23rpx;
			color: #A6A6B2;
			margin-bottom: 33rpx;
		}

		.shui-ji-num {
			font-size: 28rpx;
			color: #FFF;
			font-weight: 700;
			text-align: left;
			margin-bottom: 16rpx;
		}

		.popup-box-btn {
			width: 475rpx;
			height: 90rpx;
			background: #0BFF8D;
			color: #000E00;
			font-size: 30rpx;
			border-radius: 8rpx;
			font-weight: bold;
		}

		.tips {
			margin-top: 29rpx;
			font-size: 24rpx;
			color: #CFCFD9;
		}



		.close-popup {
			width: 48rpx;
			height: 48rpx;
		}

		.popup-kuangshi {
			width: 56rpx;
			height: 36rpx;
		}






		.put-num-tip {
			font-size: 25rpx;
			font-family: SourceHanSansSC, SourceHanSansSC;
			font-weight: 400;
			color: #FFFFFF;
		}
	}

	.minus {
		width: 22px;
		height: 22px;
		@include flex;
		justify-content: center;
		align-items: center;
	}

	.input {
		padding: 0 10px;
	}

	.plus {
		width: 22px;
		height: 22px;
		// background-color: #FF0000;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}
</style>